<template>
    <sub-box v-loading="loading">
        <breadcrumb :title="'编目详情'">
            <el-button size="small" type="primary" @click="save">保存</el-button>
        </breadcrumb>
        <div class="white-block mt20">
            <div class="head-line">数据提供</div>
            <el-form class="form-common" :model="ruleForm" size="small" label-width="100px" :label-position="'left'">
                <el-row>
                    <el-form-item class="full">
                        <div slot="label">
                            编目方式：
                            <el-tooltip class="item" effect="light" placement="right">
                                <div slot="content">
                                    提醒：数据提供的方式选择将营销数据提供的归集方式。<br>
                                    选择格式化文件：编目人员需定时上传格式化文件及数据入库。<br>
                                    选择数据源：数据轨迹想采用数据库交换方式。<br>
                                    选择非格式化文件：编目人员需要定期上传非格式化文件。
                                </div>
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                        <el-radio-group v-model="ruleForm.dirWay" @change="dirWayChange">
                            <el-radio label="1" :disabled="type==1 || type==2">数据源</el-radio>
                            <el-radio label="2" :disabled="type==1 || type==2">格式化文件</el-radio>
                            <el-radio label="3" :disabled="type!=1 || type==2">DCSB</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="ruleForm.dirWay==1 && type==3">
                        <el-form-item class="full" label="录入方式：">
                            <el-radio-group v-model="ruleForm.entryWay" @change="entryWayChange">
                                <!--                                <el-radio label="1">DB采集</el-radio>-->
                                <el-radio label="2" :disabled="type==2">文件导入</el-radio>
                                <el-radio label="3" :disabled="type==2">手工录入</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <template v-if="ruleForm.entryWay==1">
                            <el-col :span="11">
                                <el-form-item label="部门数据源：" prop="">
                                    <el-select v-model="ruleForm.docking" placeholder="请选择" class="full" size="small">
                                        <el-option
                                            v-for="item in shareTypeOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                <el-form-item label="编目表名：" prop="">
                                    <el-select v-model="ruleForm.docking" placeholder="请选择" class="full" size="small">
                                        <el-option
                                            v-for="item in shareTypeOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </template>
                        <template v-else-if="ruleForm.entryWay==2">
                            <el-col :span="24">
                                <el-form-item label="" prop="">
                                    <el-button size="small" class="primary vast mr10" @click="downLoad()" plain
                                               :disabled="type==2">下载模板
                                    </el-button>
                                    <upload :fileList.sync="fileList" :showFileList="false" ref="docList"
                                            @success="uploadSuccess" @progress="uploadProgress" :accept="'.xls,.xlsx'"
                                            class="file-upload" :action="upAction">
                                        <el-button size="small" class="minor vast" slot="trigger" plain
                                                   :disabled="type==2">
                                            文件导入
                                        </el-button>
                                        <span slot="tip"></span>
                                    </upload>
                                </el-form-item>
                            </el-col>
                        </template>
                    </template>
                    <template v-else-if="ruleForm.dirWay==2">
                        <el-col :span="24">
                            <el-form-item label="" prop="">
                                <el-button size="small" class="primary vast" v-if="ruleForm.dirWay==2"
                                           :class="{mr10: ruleForm.dirWay==2}" @click="downLoad()">下载模板
                                </el-button>
                                <upload :fileList.sync="fileList" :showFileList="false" ref="docList"
                                        @success="uploadSuccess" @progress="uploadProgress" :accept="'.xls,.xlsx'"
                                        class="file-upload" :action="upAction">
                                    <el-button size="small" class="minor vast" slot="trigger">文件导入</el-button>
                                    <span slot="tip"></span>
                                </upload>
                            </el-form-item>
                        </el-col>
                    </template>
                    <!--                    <template v-else>-->
                    <!--                        <div class="text-center mt30 mb20">数据自动从DCSB中获取</div>-->
                    <!--                    </template>-->
                </el-row>
            </el-form>
            <table-example :data="fieldTableData" :tableColumn="fieldTableHeader" :slotColumns="fieldTableSlotColumns"
                           class="mt20" :emptyText="'请选择数据源、表名、初始化表结构'" v-if="ruleForm.dirWay!=3" ref="fieldTable">
                <template slot="num" slot-scope="scope">
                    <span>{{scope.$index+1}}</span>
                </template>
                <template slot="englishName" slot-scope="scope">
                    <el-input v-if="ruleForm.dirWay==1&&ruleForm.entryWay==3" v-model="scope.row.englishName"
                              size="small" :class="{error: scope.row.error}"
                              @blur="fieldNameBlur(scope.row)"></el-input>
                    <span v-else>{{scope.row.englishName}}</span>
                </template>
                <template slot="fieldType" slot-scope="scope">
                    <!--                    <el-input v-if="ruleForm.entryWay==3" v-model="scope.row.type" size="small"></el-input>-->
                    <el-select v-if="ruleForm.dirWay==1&&ruleForm.entryWay==3" v-model="scope.row.fieldType"
                               size="small">
                        <el-option
                            v-for="item in colTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span v-else>{{scope.row.fieldType}}</span>
                </template>
                <template slot="fieldLength" slot-scope="scope">
                    <el-input v-if="ruleForm.dirWay==1&&ruleForm.entryWay==3" v-model="scope.row.fieldLength"
                              size="small"
                              type="number"></el-input>
                    <span v-else>{{scope.row.fieldLength}}</span>
                </template>
                <template slot="fieldAccuracy" slot-scope="scope">
                    <el-input v-if="ruleForm.dirWay==1&&ruleForm.entryWay==3" v-model="scope.row.fieldAccuracy"
                              size="small"
                              type="number"></el-input>
                    <span v-else>{{scope.row.fieldAccuracy}}</span>
                </template>
                <template slot="chineseName" slot-scope="scope">
                    <el-input v-if="ruleForm.dirWay==1&&ruleForm.entryWay==3" v-model="scope.row.chineseName"
                              size="small"></el-input>
                    <span v-else>{{scope.row.chineseName}}</span>
                </template>
                <template slot="keywords" slot-scope="scope">
                    <!--                    <el-input v-if="ruleForm.entryWay==3" v-model="scope.row.isKey" size="small"></el-input>-->
                    <el-select v-if="ruleForm.dirWay==1&&ruleForm.entryWay==3" v-model="scope.row.keywords"
                               size="small">
                        <el-option
                            v-for="item in isKeyOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span v-else>{{scope.row.keywords==1?'是':'否'}}</span>
                </template>
                <template slot="operation" slot-scope="scope">
                    <div class="operation">
                        <el-link type="primary" :underline="false" v-if="ruleForm.dirWay==1&&ruleForm.entryWay==3"
                                 @click="addEmpty(scope.$index)">增加字段
                        </el-link>
                        <el-link type="primary" :underline="false" @click="remove(scope.$index)">删除</el-link>
                    </div>
                </template>
            </table-example>
            <div v-if="apiFlag">
                <div class="tab-list">
                    <div class="header">
                    <span v-for="(list,index) in tabApi" :key="index" @click="tabClick('tabApiStatus',index)"
                          :class="{'active': tabApiStatus==index}">{{list}}</span>
                    </div>
                    <div class="content">
                        <div class="pane" v-if="tabApiStatus==0">
                            <div class="form-common mt30">
                                <div class="form-item">
                                    <div class="form-item-label">接口名称</div>
                                    <div class="form-item-content" v-if="detailEx.interfaceName">
                                        {{detailEx.interfaceName}}
                                    </div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-label">创建时间</div>
                                    <div class="form-item-content">{{detailEx.createTime}}</div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-label">接口地址</div>
                                    <div class="form-item-content">
                                        {{detailEx.apiAddress}}
                                    </div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-label">请求方式</div>
                                    <div class="form-item-content">
                                        <span v-if="detailEx.requestType==1">GET</span>
                                        <span v-else-if="detailEx.requestType==2">POST</span>
                                        <span v-else-if="detailEx.requestType==3">webService</span>
                                    </div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-label">支持格式</div>
                                    <div class="form-item-content">{detailEx.supportFormat}}</div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-label">接口说明</div>
                                    <div class="form-item-content">{{detailEx.apiDesc}}</div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-label">更新时间</div>
                                    <div class="form-item-content">{{detailEx.modifyTime}}</div>
                                </div>
                                <div class="form-item">
                                    <div class="form-item-label">资源说明</div>
                                    <div class="form-item-content">{{detailEx.rdResourceDesc}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="pane" v-if="tabApiStatus==1">
                            <div class="info">
                                <div class="title mt30">请求参数</div>
                                <table-example :data="requestParamInfo" :tableColumn="paramHeader"
                                               :slotColumns="slotColumns"
                                               class="mt20">
                                    <template slot="necessary" slot-scope="scope">
                                        <span>{{scope.row.necessary==1?'是':'否'}}</span>
                                    </template>
                                </table-example>
                                <div class="title mt30">返回参数</div>
                                <table-example :data="returnParamInfo" :tableColumn="responseHeader"
                                               class="mt20">
                                </table-example>
                            </div>
                        </div>
                        <div class="pane" v-if="tabApiStatus==2">
                            <div class="example">
                                <div class="title mt30">请求示例</div>
                                <div>
                                    {{detailEx.requestDemo}}
                                </div>
                                <div class="title mt30">返回示例</div>
                                <div>
                                    {{detailEx.returnDemo}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="white-block mt20">
            <div class="head-line">发布设置</div>
            <el-form class="form-common" :model="ruleForm" size="small" label-width="100px" :label-position="'left'">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="对接人：" prop="userName">
                            <el-input v-model="ruleForm.userName" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="联系方式：" prop="phone">
                            <el-input v-model="ruleForm.phone" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="history white-block mt20" v-if="detail">
            <div class="head-line">修改历史</div>
            <table-example :data="updateLogsData" :tableColumn="header" :slotColumns="columns" class="mt20"
                           ref="updateLogs">
                <template slot="num" slot-scope="scope">
                    <span>{{scope.$index+1}}</span>
                </template>
                <template slot="updateType" slot-scope="scope">
                    <span>{{scope.row.updateType==0?'新增':'修改'}}</span>
                </template>
            </table-example>
        </div>

    </sub-box>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import subBox from '../../components/layout/layout-sub'
    import tableExample from '../../components/table'
    import upload from '../../components/upload'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                shareTypeOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '公开',
                        value: '1'
                    },
                    {
                        label: '受限',
                        value: '2'
                    },
                    {
                        label: '部门所有',
                        value: '3'
                    }
                ],
                refreshOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '实时',
                        value: '1'
                    },
                    {
                        label: '每天',
                        value: '2'
                    },
                    {
                        label: '每月',
                        value: '3'
                    },
                    {
                        label: '每季度',
                        value: '4'
                    },
                    {
                        label: '每半年',
                        value: '5'
                    },
                    {
                        label: '每年',
                        value: '6'
                    },
                    {
                        label: '不更新',
                        value: '7'
                    }
                ],
                colTypeOptions: [
                    {
                        label: '字符串',
                        value: 'char'
                    },
                    {
                        label: '数值',
                        value: 'number'
                    },
                    {
                        label: '日期',
                        value: 'date'
                    },
                    {
                        label: '不定长文本',
                        value: 'longtext'
                    }
                ],
                isKeyOptions: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 2
                    }
                ],
                ruleForm: {
                    userName: '',
                    phone: '',
                    dirWay: '1',
                    entryWay: '2'
                },
                updateLogsData: [], // 修改历史数据
                header: [
                    {
                        prop: 'num',
                        label: '序号',
                        width: 100,
                        align: 'center'
                    },
                    {
                        prop: 'updateTime',
                        label: '变更时间',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'updateUserName',
                        label: '变更人',
                        minWidth: '200',
                        align: 'center'
                    },
                    {
                        prop: 'updateType',
                        label: '操作',
                        minWidth: '100',
                        align: 'center',
                        fixed: 'right'
                    }
                ], // 修改历史表头
                columns: ['num', 'updateType'],
                fieldTableData: [], // 编目数据
                fieldTableHeader: [
                    {
                        prop: 'num',
                        label: '序号',
                        minWidth: 50,
                        align: 'center'
                    },
                    {
                        prop: 'englishName',
                        label: '字段名',
                        minWidth: 150,
                        align: 'center'
                    },
                    {
                        prop: 'fieldType',
                        label: '字段类型',
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        prop: 'fieldLength',
                        label: '字段长度',
                        minWidth: 100,
                        align: 'center'
                    },
                    {
                        prop: 'fieldAccuracy',
                        label: '字段精度',
                        minWidth: 100,
                        align: 'center'
                    },
                    {
                        prop: 'chineseName',
                        label: '字段描述',
                        minWidth: 150,
                        align: 'center'
                    },
                    {
                        prop: 'keywords',
                        label: '主键',
                        minWidth: 80,
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 120,
                        align: 'center',
                        fixed: 'right'
                    }
                ], // 编目数据表头
                fieldTableSlotColumns: ['num', 'englishName', 'fieldType', 'fieldLength', 'fieldAccuracy', 'chineseName', 'keywords', 'operation'],
                id: '',
                type: '',
                detail: null,
                loading: false,
                fileList: [], // 文件导入,
                upAction: (window.localStorage.getItem('ajaxApi') || '/_api') + '/rdResourceDirData/readExcelToList',
                tabApi: ['接口参数', '参数信息', '接口示例'],
                tabApiStatus: 0,
                requestParamInfo: [],
                returnParamInfo: [],
                paramHeader: [
                    {
                        prop: 'parameterName',
                        label: '参数名称',
                        minWidth: '30%',
                        align: 'center'
                    },
                    {
                        prop: 'type',
                        label: '类型',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'necessary',
                        label: '是否必填',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'explains',
                        label: '说明',
                        minWidth: '30%',
                        align: 'center'
                    }
                ],
                responseHeader: [
                    {
                        prop: 'parameterName',
                        label: '参数名称',
                        minWidth: '30%',
                        align: 'center'
                    },
                    {
                        prop: 'type',
                        label: '类型',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'instanceValue',
                        label: '示例值',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'explains',
                        label: '说明',
                        minWidth: '30%',
                        align: 'center'
                    }
                ],
                slotColumns: ['necessary'],
                detailEx: {},
                apiFlag: false,
                list: [],
                tableData: [],
                entry: false,
                entry1: false,
                val: '',
                data: []
            }
        },
        watch: {
            detail(val) {
                this.ruleForm.userName = this.user.name
                // this.ruleForm.phone = this.user.phone
                if (Object.prototype.toString.call(val) === '[object Object]') {
                    if (val.dataItems && val.dataItems[0]) this.fieldTableData = val.dataItems
                    if (val.exchangeUserName) this.ruleForm.userName = val.exchangeUserName
                    if (val.phoneNum) this.ruleForm.phone = val.phoneNum
                    this.updateLogsData = val.updateLogs
                    this.ruleForm.dirWay = (val.catalogType + 1).toString()
                    this.ruleForm.entryWay = (val.addType + 2).toString()
                    if (Number(this.type) === 1) {
                        this.ruleForm.dirWay = '3'
                    }
                }
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        mounted() {
            this.id = this.$route.query.id
            this.type = this.$route.query.type
            if (Number(this.type) === 1) {
                this.ruleForm.dirWay = '3'
            }
            if (this.id) {
                this.getDetail()
            } else {
                this.ruleForm.userName = this.user.name
                // this.ruleForm.phone = this.user.phone
            }
        },
        methods: {
            tabClick(name, index) {
                this[name] = index
            },
            downLoad() {
                let api = window.localStorage.getItem('ajaxApi') || '/_api'
                window.open(location.origin + api + '/rdResourceDirData/downLoadTemplateExcelFile', '_blank')
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            save(formName) {
                let _this = this, fieldNameError = false
                if (this.fieldTableData[0]) {
                    this.fieldTableData.map(e => {
                        _this.$set(e, 'error', false)
                        if (!e.englishName) {
                            _this.$set(e, 'error', true)
                            fieldNameError = true
                        }
                    })
                    if (fieldNameError) {
                        this.$method.messageBox('alert', '字段名不能为空')
                        return
                    }
                }
                this.loading = true
                this.$http.post('/rdResourceDirData/updateOrSaveDirData', {
                    id: this.detail ? this.detail.id : '',
                    resDirId: this.id,
                    exchangeUserName: this.ruleForm.userName,
                    phoneNum: this.ruleForm.phone,
                    dataItems: this.fieldTableData,
                    catalogType: Number(this.ruleForm.dirWay) - 1,
                    addType: Number(this.ruleForm.entryWay) - 2
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        _this.$message.success({
                            message: '编目更新成功',
                            showClose: true
                        })
                        _this.$emit('upload')
                        _this.$nextTick(() => {
                            _this.$method.historyBack()
                        })
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            dirWayChange(val) {
                if (Number(val) === 2) {
                    this.fieldTableData = []
                } else {
                    this.fieldTableData = this.tableData
                }

            },
            entryWayChange(val) {
                this.val = val
                if (val !== '3') {
                    this.fieldTableData = this.data
                } else {
                    this.fieldTableData = this.tableData
                    if (this.fieldTableData.length < 1) {
                        this.addEmpty()
                    }
                }
                // this.addEmpty()
                // this.fieldTableData = []
            },
            getDetail() {
                this.loading = true
                this.$http.get('/rdResourceDirData/getResInfoByResId', {
                    id: this.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        // debugger
                        if (this.type === 3 || this.type === '3') {
                            this.detail = result.data.exchangeData
                            this.tableData = result.data.exchangeData.dataItems
                            this.data = [...result.data.exchangeData.dataItems]
                            this.apiFlag = false

                        } else if (this.type === 1 || this.type === '1') {
                            this.apiFlag = true
                            this.detailEx = result.data.apiData
                            this.requestParamInfo = result.data.apiData.requestParamInfo
                            this.returnParamInfo = result.data.apiData.returnParamInfo
                        } else {
                            this.apiFlag = false
                        }

                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            uploadSuccess(response, file, fileList) {
                if (response.success) {
                    this.fieldTableData = response.data
                }
                this.fileList = []
                this.loading = false
            },
            uploadProgress(event, file, fileList) {
                this.loading = true
            },
            remove(i) {
                this.fieldTableData.splice(i, 1)
                if (Number(this.ruleForm.entryWay) === 3 && this.fieldTableData.length < 1) {
                    this.addEmpty()
                }
            },
            addEmpty(i) {
                if (this.val !== '2') {
                    this.fieldTableData.splice((i + 1) || 0, 0, {
                        id: null,
                        englishName: '',
                        fieldType: 'char',
                        fieldLength: '',
                        fieldAccuracy: '',
                        chineseName: '',
                        keywords: 1
                    })
                } else {
                    this.fieldTableData = this.tableData
                }

            },
            fieldNameBlur(row) {
                if (!row.englishName) {
                    this.$set(row, 'error', true)
                } else {
                    this.$set(row, 'error', false)
                }
            }
        },
        components: {
            breadcrumb,
            subBox,
            tableExample,
            upload
        }
    }
</script>

<style scoped lang="less">
    .box {
        height: 200px;
        text-align: center;

        p {
            margin-top: 50px;
        }
    }

    .detail-head {
        .res-list {
            padding: 30px;
        }

        .title {

        }
    }

    .tab-list {
        .header {
            background-color: #eee;

            span {
                display: inline-block;
                padding: 10px 20px;
                cursor: pointer;

                &.active {
                    background-color: #ccc;
                }
            }
        }

        .content {
            .info {
                .title {
                    color: #999;
                }
            }
        }
    }

    .form-common {
        .form-item {
            margin-bottom: 20px;

            .form-item-label {
                width: 180px;
            }

            .form-item-content {
                margin-left: 180px;
            }
        }
    }

    .basic-main {
        padding-bottom: 60px;
    }

    .form-common {
        max-width: 80%;
    }

    .fix-bottom {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 10px 50px;
        background-color: #fff;
        box-shadow: 0 5px 10px -2px #999;
    }

    .switch-group {
        .el-form-item {
            margin-right: 60px;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .history {
    }

    .file-upload {
        display: inline-block;
    }
</style>
